<template>
	<view class="agreement">
		<u-navbar back-icon-color="#000" :back-text-style="{color: '#000'}" :back-text="title" />
		<view class="zzxTabs">
			<zzx-tabs defaultColor="#000" lineHeight="2px" :items="items" :current="current" @clickItem="clickItem" ref="mytabs"></zzx-tabs>
		</view>
		<view class="zzxContent">
			<iframe v-if="current === 0" src="https://st.music.163.com/official-terms/service"></iframe>
			<iframe v-if="current === 1" src="https://st.music.163.com/official-terms/privacy"></iframe>
			<iframe v-if="current === 2" src="https://st.music.163.com/official-terms/children"></iframe>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import zzxTabs from '@/components/zzx-tabs/zzx-tabs.vue';
	export default {
		data() {
			return {
				title: '',
				items: ['服务条款', '隐私政策', '儿童隐私政策'],
				current: 0
			};
		},
		components: {
			components: {
				uniNavBar,
				zzxTabs
			}
		},
		onLoad(e) {
			this.title = e.title;
			if (e.from == 'userAgreement') {
				this.current = 0;
			} else if (e.from == 'privacyPolicy') {
				this.current = 1;
			} else if (e.from == "children'sPrivacyPolicy") {
				this.current = 2;
			}
		},
		methods: {
			handleBack() {
				uni.navigateBack();
			},
			clickItem(e) {
				this.current = e.currentIndex;
			}
		}
	};
</script>

<style lang="scss">
	.agreement {
		.zzxTabs {
			position: fixed;
			width: 100%;
			border-bottom: 1px #dedede solid;
			top: calc(var(--status-bar-height) + 44px);
			z-index: 999;

			/deep/.item-title {
				font-size: 12px;
			}
		}

		.zzxContent {
			margin-top: calc(60upx + 3px);
			height: calc(100vh - var(--status-bar-height) - 44px - 60upx - 3px);
			overflow: scroll;

			iframe {
				width: 100%;
				height: 100%;
				border: none;
				top: calc(var(--status-bar-height) + 44px + 60upx + 3px);
			}
		}
	}
</style>
